<template>
  <div class="home">
    <el-container>
      <el-header height="50px">教师信息管理</el-header>
      <el-main>
        <el-row>
          <el-col :span="18">
            <el-drawer
              title="学生信息"
              :visible.sync="table"
              :before-close="handleClose"
              direction="ttb"
              size="50%"
            >
            </el-drawer>

            <el-button type="danger" size="medium" @click="add=true;dialog = true">修改</el-button>
            <!-- 弹框 -->
            <el-dialog
              :title="add?'教师信息新增':'教师信息修改'"
              :visible.sync="dialog"
              style="text-align:left !important"
              :before-close="handleClose"
            >
              <el-form :model="form" label-width="80px" ref="form">
                <el-form-item label="姓名" prop="xingming">
                  <el-input v-model="form.xingming" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="phone">
                  <el-input v-model.number="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="QQ" prop="QQ">
                  <el-input v-model.number="form.QQ" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="专业" prop="work">
                  <el-input v-model="form.work" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="授课班级" prop="date">
                  <el-input v-model="form.date" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div class="dialog-footer" slot="footer">
                <el-button type="primary" @click="dialog = false">取 消</el-button>
                <el-button type="success" @click="saveInfo(form)">保存</el-button>
              </div>
            </el-dialog>
          </el-col>
        </el-row>
        <!-- 展示 -->
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="xuhao" type="index" width="50" label="序号"></el-table-column>
          <el-table-column prop="xingming" label="姓名" width="120"></el-table-column>
          <el-table-column prop="phone" label="手机号" width="200"></el-table-column>
          <el-table-column prop="QQ" label="QQ号" width="120"></el-table-column>
          <el-table-column prop="work" label="专业" width="120"></el-table-column>
          <el-table-column prop="date" label="授课班级" width="150"></el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="delRow(scope.$index)">删除</el-button>
              <el-button size="mini" type="success" @click="editRow(scope.$index,scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
let _index
export default {
  name: 'home',
  data() {
    return {
      input: '',
      table: false,
      dialog: false,
      add: true,
      a: [], // 查询选中列表
      tableData: [],
      form: {}
    }
  },
  created() {
    this.getdata()
  },
  methods: {
    handleClose(done) {
      done()
      this.form = {}
      this.input = ''
    },
    getdata() {
      // 获取数据
      this.tableData = JSON.parse(localStorage.getItem('biao') || '[]')
    },
    // 保存数据
    saveInfo(form) {
      if (this.add == true) {
        if (
          this.form.xingming &&
          this.form.phone &&
          this.form.QQ &&
          this.form.work &&
          this.form.date
        ) {
          this.tableData.push(form)
          localStorage.setItem('biao', JSON.stringify(this.tableData))
          this.dialog = false
          this.form = {}
        } else {
          alert('姓名,手机号,QQ,专业,毕业时间不能为空')
        }
      } else {
        this.tableData[this._index] = this.form
        localStorage.setItem('biao', JSON.stringify(this.tableData))
        this.dialog = false
        this.form = {}
        this.getdata()
      }
    },

    // 删除
    delRow(index) {
      if (confirm('确定删除吗?')) {
        this.tableData.splice(index, 1)
        localStorage.setItem('biao', JSON.stringify(this.tableData))
      }
    },
    // 修改
    editRow(id, row) {
      this.dialog = true
      this.add = false
      this._index = id
      // 第一种
      // var item = this.tableData[this._index];
      // this.form.xingming = item.xingming;
      // this.form.phone = item.phone;
      // this.form.QQ = item.QQ;
      // this.form.work = item.work;
      // this.form.date = item.date;
      // 第二种
      this.form = Object.assign({}, row)
    },
    // 查询数据
    cha() {
      let arr = JSON.parse(localStorage.getItem('biao'))
      this.a = arr.filter(
        v => v.xingming == this.input || v.phone == this.input
      )
      if (this.a.length > 0) {
        this.table = true
      } else {
        alert('用户名或手机号不存在')
      }
    }
  }
}
</script>
<style scoped>
.home {
  width: 1002px;
  margin: 0 auto;
  border: 1px solid rgba(100, 129, 224, 0.986);
  border-radius: 5px;
}
.el-header {
  background-color: rgb(65, 133, 221);
  color: rgb(13, 26, 100);
  font-size: 20px;
  text-align: left;
  line-height: 50px;
}
</style>